<template>
    <div class="addAdmin">
        <h2 style="text-align: center; margin: 20px">管理员修改</h2>
        <el-form
            :model="upAdminsData"
            status-icon
            :rules="rules"
            ref="upAdminsData"
            label-width="100px"
            class="demo-upAdminsData"
        >
            <el-form-item label="账号">
                <el-input
                    v-model="upAdminsData.account"
                    @blur="isAdmins(upAdminsData)"
                ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input
                    type="passwordword"
                    v-model="upAdminsData.password"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkpassword">
                <el-input
                    type="passwordword"
                    v-model="upAdminsData.checkpassword"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model.number="upAdminsData.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('upAdminsData')"
                    >提交</el-button
                >
                <el-button  @click="$router.push('/System/adminsSystem')"
                    >取消</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";

const {
    mapState: adminsMapState,
    mapMutations: adminsMapMutations,
    mapActions: adminsMapActions,
} = createNamespacedHelpers("admins");

export default {
    data() {
        var validatepassword = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.upAdminsData.checkpassword !== "") {
                    this.$refs.upAdminsData.validateField("checkpassword");
                }
                callback();
            }
        };
        var validatepassword2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.upAdminsData.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            rules: {
                password: [{ validator: validatepassword, trigger: "blur" }],
                checkpassword: [
                    { validator: validatepassword2, trigger: "blur" },
                ],
            },
        };
    },
    async mounted() {
        await this.seekAdmins();
        this.changeUpAdminsData(this.$route.params);
    },
    computed: {
        ...adminsMapState(["upAdminsData"]),
    },
    methods: {
        ...adminsMapMutations(["changeUpAdminsData"]),
        ...adminsMapActions(["modifyAdmins", "getAdmins", "isAdmins","seekAdmins"]),

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //修改管理员
                    this.modifyAdmins(this.$route.params);
                    this.$router.push("/System/adminsSystem");
                } else {
                    alert("请正确输入");
                }
            });
        },
    },
};
</script>
<style lang="scss">
.addAdmin {
    width: 50%;
    margin: 0 auto;
    box-shadow: 0 0 5px black;
    padding: 10px;
}
</style>